<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式断点使用示例</title>
    <style>
      /* 引入响应式CSS */
      @import './responsive.css';

      /* 示例样式 */
      .demo-container {
        margin: 20px 0;
        padding: 20px;
        background-color: #f5f5f5;
        border-radius: 8px;
      }

      .demo-item {
        background-color: white;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .screen-info {
        position: fixed;
        top: 10px;
        right: 10px;
        background: #333;
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <!-- 屏幕尺寸指示器 -->
    <div class="screen-info">
      <span class="show-xxs">xxs (≤344px)</span>
      <span class="show-xs">xs (≤375px)</span>
      <span class="show-sm">sm (≤480px)</span>
      <span class="show-md">md (≤576px)</span>
      <span class="show-lg">lg (≤768px)</span>
      <span class="show-xl">xl (≤992px)</span>
    </div>

    <div class="container">
      <h1 class="text-responsive">响应式断点使用示例</h1>
      <p class="text-responsive">调整浏览器窗口大小来查看不同断点的效果</p>

      <div class="demo-container">
        <h2>网格布局示例</h2>
        <div class="grid">
          <div class="demo-item">网格项目 1</div>
          <div class="demo-item">网格项目 2</div>
          <div class="demo-item">网格项目 3</div>
          <div class="demo-item">网格项目 4</div>
          <div class="demo-item">网格项目 5</div>
          <div class="demo-item">网格项目 6</div>
        </div>
      </div>

      <div class="demo-container">
        <h2>按钮示例</h2>
        <button class="btn">响应式按钮</button>
        <button class="btn">另一个按钮</button>
      </div>

      <div class="demo-container">
        <h2>表单示例</h2>
        <input type="text" class="form-input" placeholder="响应式输入框" />
        <input type="email" class="form-input" placeholder="邮箱地址" />
      </div>

      <div class="demo-container">
        <h2>卡片示例</h2>
        <div class="card">
          <h3>卡片标题</h3>
          <p>这是一个响应式卡片的内容，会根据屏幕大小调整内边距和外边距。</p>
        </div>
        <div class="card">
          <h3>另一个卡片</h3>
          <p>卡片内容会自动适应不同的屏幕尺寸。</p>
        </div>
      </div>

      <div class="demo-container">
        <h2>显示/隐藏工具类示例</h2>
        <div
          class="show-xxs"
          style="background: #ff6b6b; padding: 10px; color: white; margin-bottom: 10px"
        >
          仅在 xxs 屏幕显示 (≤344px)
        </div>
        <div
          class="show-xs"
          style="background: #4ecdc4; padding: 10px; color: white; margin-bottom: 10px"
        >
          仅在 xs 屏幕显示 (≤375px)
        </div>
        <div
          class="show-sm"
          style="background: #45b7d1; padding: 10px; color: white; margin-bottom: 10px"
        >
          仅在 sm 屏幕显示 (≤480px)
        </div>
        <div
          class="show-md"
          style="background: #96ceb4; padding: 10px; color: white; margin-bottom: 10px"
        >
          仅在 md 屏幕显示 (≤576px)
        </div>
        <div
          class="show-lg"
          style="background: #feca57; padding: 10px; color: white; margin-bottom: 10px"
        >
          仅在 lg 屏幕显示 (≤768px)
        </div>
        <div
          class="show-xl"
          style="background: #ff9ff3; padding: 10px; color: white; margin-bottom: 10px"
        >
          仅在 xl 屏幕显示 (≤992px)
        </div>
      </div>

      <div class="demo-container">
        <h2>工具类示例</h2>
        <div class="text-center-mobile mb-md-mobile">这段文字在移动设备上居中显示</div>
        <div class="w-full-mobile px-md-mobile">这个容器在移动设备上占满宽度并有适当的内边距</div>
      </div>
    </div>

    <!-- 侧边栏示例 -->
    <div
      class="sidebar"
      style="
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        background: #333;
        color: white;
        padding: 20px;
      "
    >
      <h3>侧边栏</h3>
      <p>在大屏手机上隐藏，在平板上显示</p>
    </div>

    <script>
      // 显示当前屏幕宽度
      function updateScreenInfo() {
        const width = window.innerWidth
        console.log(`当前屏幕宽度: ${width}px`)

        if (width <= 344) {
          console.log('当前断点: xxs (折叠屏、极老机型)')
        } else if (width <= 375) {
          console.log('当前断点: xs (iPhone SE、早期安卓小屏)')
        } else if (width <= 480) {
          console.log('当前断点: sm (普通小屏手机)')
        } else if (width <= 576) {
          console.log('当前断点: md (中型手机)')
        } else if (width <= 768) {
          console.log('当前断点: lg (大屏手机/横屏小设备)')
        } else if (width <= 992) {
          console.log('当前断点: xl (平板设备)')
        } else {
          console.log('当前断点: 桌面设备')
        }
      }

      // 页面加载时和窗口大小改变时更新信息
      window.addEventListener('load', updateScreenInfo)
      window.addEventListener('resize', updateScreenInfo)
    </script>
  </body>
</html>
